<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <div class="header">线上热门搜索</div>
            <el-dropdown class="right">
              <span class="el-dropdown-link" style="font-size: 18px;font-weight: bold;padding:20px">
                ...
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </el-card>
        <el-row :gutter="10">
          <el-col :span="12">
            <CardEchart />
          </el-col>
          <el-col :span="12">
            <CardEchart />
          </el-col>
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
              prop="date"
              label="排名"
              type="index"
              sortable
              width="80"
            />
            <el-table-column
              prop="name"
              label="搜索关键字"
              width="180"
            />
            <el-table-column
              prop="address"
              label="用户数"
              sortable
              width="180"
            />
            <el-table-column
              prop="address"
              sortable
              label="周涨幅"
            />
          </el-table>
          <el-pagination
            class="pagination"
            layout="prev, pager, next"
            :total="100"
          />
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="Saleright">
            <span>销售类别占比</span>
            <div ref="btns" class="btns">
              <el-button style="background: skyblue" @click.native="changetype">全部渠道</el-button>
              <el-button size="mini" @click.native="changetype">线上</el-button>
              <el-button size="mini" @click.native="changetype">门店</el-button>
            </div>
          </div>
          <div ref="pie" style="width: 100%;height: 300px;" />
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>
<script>
import * as ECharts from 'echarts'
import CardEchart from '@/views/dashboard/HomeFooter/CardEchart/index'
export default {
  name: 'Index',
  components: {
    CardEchart
  },
  data() {
    return {
      tableData: [{}]
    }
  },
  mounted() {
    const mycharts = ECharts.init(this.$refs.pie)
    mycharts.setOption({
      tooltip: {
        trigger: 'item'
      },
      label: {
        show: true
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'outside'
          },
          emphasis: {
          },
          labelLine: {
            show: true
          },
          data: [
            { value: 1048, name: '视频' },
            { value: 735, name: '音频' },
            { value: 580, name: '小说' },
            { value: 484, name: '文字' },
            { value: 300, name: '音乐' }
          ]
        }
      ]
    })
  },
  methods: {
    changetype(e) {
      const btns = this.$refs.btns.children
      Array.from(btns).forEach((item) => {
        item.style.backgroundColor = ''
      })
      e.target.style.backgroundColor = 'skyblue'
    }
  }
}
</script>
<style scoped>
.header{
  border-bottom: 1px solid #eee;
  padding: 20px;
}
.clearfix{
  position: relative;
}
.right{
  position: absolute;
  top:20px;
  right: 0;
}
.pagination{
  float: right;
}
.Saleright{
  margin: 20px;
}
.btns{
  float: right;
}
</style>
